<template>
	<view class="wrap">
		<view class="bind">
			<view class="icon">
				<image :src="imgUrl + '10.png'" mode="aspectFill"></image>
			</view>
			<text class="code">验证手机号</text>
		</view>
		<view class="form">
			<view class="form_left">
				<view class="form_left_icon">
					<image :src="imgUrl + '11.png'" mode="aspectFill"></image>
				</view>
				<view class="form_left_text">
					+86
				</view>
				<view class="form_left_input">
					<input type="number" maxlength="11" v-model="phone" placeholder="请输入手机号码"
						placeholder-style="font-size: 30rpx;font-weight: 400;color: #b1b2b5;">
				</view>
			</view>
		</view>
		<view class="gap"></view>
		<view class="form">
			<view class="form_left">
				<view class="form_left_input">
					<input type="number" v-model="code" placeholder="请输入验证码"
						placeholder-style="font-size: 30rpx;font-weight: 400;color: #b1b2b5;">
				</view>
			</view>
			<view class="form_right">
				<u-toast ref="uToast"></u-toast>
				<u-code :seconds="seconds" changeText="Xs" startText="获取验证码" @end="end" @start="start" ref="uCode"
					@change="codeChange"></u-code>
				<u-button @tap="getCode" custom-style="{border:'none'}">{{tips}}</u-button>
			</view>
		</view>
		<view class="gap"></view>
		<view @click="next" class="next">进入首页</view>
	</view>
</template>
<script>
	import {
		bindingPhone,
		setVerify
	} from '@/api/api'
	export default {
		components: {},
		data() {
			return {
				code: '',
				phone: '',
				tips: '',
				seconds: 60,
			};
		},
		onShow() {},
		onLoad() {

		},
		methods: {
			next() {
				const {
					phone,
					code
				} = this
				const that = this
				if (phone == "") {
					return uni.$u.toast('请输入手机号码');
				}
				if (code == "") {
					return uni.$u.toast('请输入验证码');
				}
				uni.showLoading({
					title: '绑定中'
				})
				bindingPhone({
					phone: phone,
					verify: code
				}).then((res) => {
					uni.hideLoading();
					uni.$u.toast('绑定成功');
					uni.setStorageSync("token", res.data.token)
					that.$store.commit("LOGIN", {
						'token': res.data.token,
						'time': 60 * 60 * 24 * 6000
					});
					uni.setStorageSync("bind_phone", 1)
					uni.reLaunch({
						url: '/pages/tabbar/index'
					})
				}).catch((e) => {
					uni.hideLoading();
					console.log(e, '[绑定错误]')
					uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				const {
					phone
				} = this
				if (phone == "") {
					return uni.$u.toast('请输入手机号码');
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setVerify({
						phone: phone,
						scene: 'bind'
					}).then((res) => {
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}).catch((e) => {
						uni.hideLoading();
						uni.$u.toast(typeof e === 'string' ? e : '请检查网络连接');
					})


				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				// uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('验证码已发送');
			}
		},
	};
</script>
<style lang='scss' scoped>
	.wrap {
		width: 750rpx;

		.bind {
			padding-top: 140rpx;

			.icon {
				width: 128rpx;
				height: 138rpx;
				margin: 0 294rpx 0 328rpx;

				image {
					display: block;
					width: 128rpx;
					height: 138rpx;
				}
			}

			.code {
				color: #303030;
				padding-top: 95rpx;
				font-size: 38rpx;
				line-height: 38rpx;
				color: #303030;
				text-align: center;
				font-weight: bold;
				display: block;
				margin-bottom: 62rpx;
			}
		}

		.form {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 80rpx;

			.form_left {
				display: flex;
				align-items: center;

				.form_left_icon {
					width: 30rpx;
					height: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.form_left_text {
					margin: 0 23rpx 0 10rpx;
					font-size: 28rpx;
					text-align: left;
					color: #202020;
				}

				.form_left_input {
					width: 300rpx;
					font-size: 38rpx;
					font-weight: bold;
					color: #434242;
				}
			}

			.form_right {
				font-size: 30rpx;
				font-weight: bold;
				text-align: right;
				color: #2473fb;
			}
		}

		.gap {
			margin: 34rpx 75rpx;
			width: 602rpx;
			height: 2rpx;
			background: #eeeeee;
			border-radius: 1rpx;
		}

		.next {
			margin: 63rpx auto 0;
			width: 500rpx;
			height: 80rpx;
			background: #2473fb;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			line-height: 80rpx;
			color: #ffffff;
		}
	}

	.u-button--info {
		font-size: 28rpx;
		text-align: right;
		color: #2473fb;
		width: 150rpx;
		height: 50rpx;
		padding: 0;
		background-color: transparent;
		border: none;
	}

	.u-button--info::before {
		background-color: transparent;
	}

	::v-deep {
		.u-button {
			border: none !important;
			background: transparent !important;
			color: #2473fb !important;
		}

		.u-button::before {
			background-color: transparent !important;
		}
	}
</style>